{% extends "base.html" %}

{% block title %}人脸管理 - AI视频分析系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="bi bi-person-badge me-2"></i>人脸管理</h2>
            <p class="text-muted mb-0">管理系统注册的人脸信息</p>
        </div>
        <button class="btn btn-primary" onclick="location.href='/registerface'">
            <i class="bi bi-plus-circle me-1"></i> 注册人脸
        </button>
    </div>

    <!-- 操作状态提示 -->
    {% if error %}
    <div class="alert alert-danger alert-dismissible fade show mb-4">
        <i class="bi bi-exclamation-circle me-2"></i> {{ error }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" onclick="this.parentElement.style.display='none'"></button>
    </div>
    {% endif %}
    
    {% if success %}
    <div class="alert alert-success alert-dismissible fade show mb-4">
        <i class="bi bi-check-circle me-2"></i> {{ success }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" onclick="this.parentElement.style.display='none'"></button>
    </div>
    {% endif %}
    
    {% if sync_result %}
    <div class="alert alert-info alert-dismissible fade show mb-4">
        <h5><i class="bi bi-cloud-arrow-up me-2"></i>同步结果</h5>
        <div class="mt-2">{{ sync_result | safe }}</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" onclick="this.parentElement.style.display='none'"></button>
    </div>
    {% endif %}

    <!-- 搜索表单 - 带刷新图标按钮 -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="get" action="/face" class="d-flex">
                <div class="input-group">
                    <input type="text" class="form-control" id="search-input" name="search" 
                           placeholder="搜索用户标识、姓名、性别..." 
                           value="{{ request.query_params.get('search', '') }}">
                    <!-- 搜索按钮 -->
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i> 搜索
                    </button>
                    <!-- 刷新按钮 -->
                    <button type="button" class="btn btn-outline-secondary" id="refresh-btn" title="刷新清除搜索条件">
                        <i class="bi bi-arrow-repeat"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 人脸表格 -->
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>用户标识</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>注册日期</th>
                            <th>注册图片</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if faces|length == 0 %}
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="py-4">
                                    <i class="bi bi-database-exclamation fs-1 text-muted"></i>
                                    <h5 class="mt-3">未找到人脸数据</h5>
                                    <p class="text-muted">请添加新的人脸</p>
                                    <a href="/registerface" class="btn btn-primary mt-2">
                                        <i class="bi bi-plus-circle me-1"></i> 注册人脸
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% else %}
                            {% for face in faces %}
                            <tr>
                                <td>{{ face.UserId }}</td>
                                <td>{{ face.UserName }}</td>
                                <td>{{ face.Gender }}</td>
                                <td>{{ face.Age }}</td>
                                <td>{{ face.RegisterTime.strftime('%Y-%m-%d %H:%M') }}</td>
                                <td>
                                    <img src="/{{ face.ImagePath }}" alt="人脸图片" class="face-img rounded" style="width: 80px; height: 80px; object-fit: cover;">
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <form action="/delete-face/{{ face.FaceId }}" method="post" class="d-inline">
                                            <button type="submit" class="btn btn-danger btn-sm" title="删除（从设备注销并删除本地记录）" onclick="return confirm('确定要删除此人脸吗？这将从所有设备注销并删除本地记录（包括图片）')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        <form action="/sync-face/{{ face.FaceId }}" method="post" class="d-inline">
                                            <button type="submit" class="btn btn-info btn-sm" title="同步到所有设备">
                                                <i class="bi bi-cloud-arrow-up"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .face-img {
        transition: transform 0.3s;
    }
    .face-img:hover {
        transform: scale(1.8);
        z-index: 10;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    
    /* 添加刷新按钮悬停动画 */
    #refresh-btn:hover i {
        animation: rotate 0.5s linear;
    }
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .sync-btn {
        transition: all 0.3s ease;
    }
    .sync-btn:hover {
        background-color: #0dcaf0;
        color: white;
    }
    
    .btn-warning {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000;
    }
    .btn-warning:hover {
        background-color: #e0a800;
        border-color: #d39e00;
    }
</style>
<script>
    // 刷新按钮功能 - 清除搜索条件并刷新页面
    document.getElementById('refresh-btn').addEventListener('click', function() {
        // 重定向到不带搜索参数的页面
        window.location.href = '/face';
    });
    
    // 自动关闭警告消息
    document.addEventListener('DOMContentLoaded', function() {
        // 自动关闭警告消息
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            setTimeout(() => {
                alert.style.transition = 'opacity 0.5s ease-out';
                alert.style.opacity = '0';
                setTimeout(() => {
                    alert.style.display = 'none';
                }, 500);
            }, 5000);  // 5秒后自动关闭
        });
        
        // 添加按钮悬停提示
        const syncButtons = document.querySelectorAll('.sync-btn');
        syncButtons.forEach(button => {
            button.addEventListener('mouseover', function() {
                this.setAttribute('title', '同步到所有设备');
            });
        });
    });
</script>
{% endblock %}